<template>
  <div class="topbarbox clearfix">
    <span class="schoolname">广东海洋大学</span>
    <span class="personalbox">
      <div class="firstbox">
        <el-avatar :size="30" :src="avatar" />
        <em class="name">{{ username }}</em>
      </div>
      <ul class="secondbox">
        <li @click="goPersonal($event, 'Personal')">进入空间</li>
        <li @click="logout($event, 'Login')">退出登录</li>
      </ul>
    </span>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

// 加载user模块 以及底下变量
import { storeToRefs } from 'pinia'
import useStore from '@/store'
const { user } = useStore()
let { username, avatar } = storeToRefs(user)

function goPersonal(e, com) {
  console.log(e, com)
  router.push({
    name: com
  })
}

function logout(e, com) {
  // 清除用户数据
  user.$patch((state) => {
    state.userInfo = {}
    state.logindata = {}
  })

  router.replace({
    name: com
  })
}
</script>

<style scoped>
.topbarbox {
  width: 100%;
  height: 44px;
  background-color: #454545;
  position: relative;
  z-index: 998;
  color: #fff;
}

.schoolname,
.personalbox {
  display: inline-block;
  height: 44px;
  line-height: 44px;
}

.schoolname {
  float: left;
  margin-left: 30px;
  padding: 0 20px;
}

.personalbox {
  position: relative;
  float: right;
  margin-right: 50px;
}

.personalbox:hover .secondbox {
  /* display: block; */
  height: 80px;

  padding-top: 5px;
  padding-bottom: 15px;
}

.firstbox {
  display: flex;
  height: 100%;
  align-items: center;
}

.name {
  position: relative;
  margin-left: 10px;
  font-size: 14px;
  cursor: pointer;
}

.name::after {
  position: absolute;
  top: 15px;
  right: -15px;
  display: block;
  content: '';
  width: 6px;
  height: 6px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.secondbox {
  /* display: none; */
  box-sizing: border-box;
  position: absolute;
  width: 120px;
  height: 0px;

  /* height: 80px;
    padding-top: 5px;
    padding-bottom: 15px; */
  background-color: #666666;
  z-index: 9999;
  top: 44px;
  right: -15px;
  color: #afc5cc;
  overflow: hidden;
  transition: all 0.3s ease;
}

.secondbox li {
  box-sizing: border-box;
  position: relative;
  height: 30px;
  line-height: 30px;
  padding-left: 45px;
  font-size: 14px;
  cursor: pointer;
}

.secondbox li:hover {
  text-decoration: underline;
}

.secondbox li::before {
  position: absolute;
  top: 0px;
  left: 20px;
  display: block;
  font-family: 'iconfont' !important;
  font-size: 16px;
  /* 阿里如果勾选了彩色图标 这里就没办法使用color自定义 要直接在阿里上定义 */
  /* 这里分离了彩色和无彩色两套图标引入使用 */
  color: #afc5cc;
}

.secondbox li:nth-child(1)::before {
  content: '\e642';
}

.secondbox li:nth-child(2)::before {
  content: '\e6f2';
}
</style>
